<template>
  <div>
    <!-- 顶部信息栏 -->
    <div class="top1_wrapper">
      <div class="container">
        <div class="top1 clearfix">
          <div class="left-kefu">
            <el-link v-if="!isChatPage" @click="goToChat" icon="el-icon-service" class="zaixiankefu">在线客服</el-link>
          </div>
          <div class="social_wrapper">
            <ul class="social clearfix" v-if="!$session.username">
              <li>
                <router-link to="/login" class="btn-default btn2" tag="button">登录</router-link>
              </li>
              <li>
                <router-link to="/useradd" class="btn-default btn2" tag="button">注册</router-link>
              </li>
            </ul>
            <ul class="social clearfix" v-else>
              <li>
                <router-link to="/" @click.native="logout" class=" btn-default btn2" tag="button">退出登录</router-link>
              </li>
              <li>
                <router-link to="/" @click.native="$router.push('/admin')" class="btn-default btn2"
                  tag="button">个人中心</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--顶部导航栏-->
    <div class="top2_wrapper" style="display: flex;align-items: center;justify-content: center">
      <div class="container">
        <div class="top2 clearfix">
          <header>
            <div class="logo_wrapper">
              <!-- Logo 可以放在这里 -->
            </div>
          </header>
          <div class="navbar navbar_ navbar-default header-box">
            <div class="navbar-collapse navbar-collapse_ collapse header-nav-ul">
              <ul class="nav navbar-nav sf-menu clearfix">
                <li>
                  <router-link to="/">
                    <i class="el-icon-house"></i>
                    首页
                  </router-link>
                </li>

                <li @mouseover="statusJingqu = true" @mouseleave="statusJingqu = false">
                  <router-link to="/attraction">
                    <i class="el-icon-location"></i>
                    旅游景区 
                  </router-link>
                </li>

                <li>
                  <router-link to="/food">
                    <i class="el-icon-food"></i>
                    美食专区
                  </router-link>
                </li>
                <li>
                  <router-link to="/performanceInfo">
                    <i class="el-icon-present"></i>
                    文艺演出
                  </router-link>
                </li>
                <li>
                  <router-link to="/aroundhotels">
                    <i class="el-icon-office-building"></i>
                    住宿信息
                  </router-link>
                </li>
                <li @mouseover="statusLvyou = true" @mouseleave="statusLvyou = false">
                  <router-link to="/strategy">
                    <i class="el-icon-document"></i>
                    行程规划 <i class="el-icon-arrow-down"></i>
                  </router-link>
                  <ul class="submenu" v-show="statusLvyou">
                    <li>
                      <router-link to="/strategy">旅游攻略</router-link>
                    </li>
                    <li>
                      <router-link to="/mapdetail">路线规划</router-link>
                    </li>
                  </ul>
                </li>
                <li @mouseover="statusXinwen = true" @mouseleave="statusXinwen = false">
                  <router-link to="/news">
                    <i class="el-icon-news"></i>
                    旅游资讯
                  </router-link>
                </li>
                <li @mouseover="statusJingji = true" @mouseleave="statusJingji = false">
                  <router-link to="/emergency">
                    <i class="el-icon-warning"></i>
                    应急信息
                  </router-link>
                </li>
                <li v-if="$session.cx != '管理员'">
                  <router-link to="/complaintadd">
                    <i class="el-icon-chat-line-round"></i> <!-- Element UI 在线投诉图标 -->
                    在线投诉
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <li style="float: right; font-size: 20px; margin-right: 20px;">
        <router-link to="/weather">
          沙依巴克区&nbsp;&nbsp; | &nbsp;&nbsp;<i :class="getWeatherIconClass(weatherInfo.weather)" class="wi"></i>&nbsp;{{
            weatherInfo.temperature }} °C
        </router-link>
      </li>
    </div>
  </div>
</template>
<style type="text/scss" lang="scss">
body {
  background-size: cover;
  font-size: 16px;

  /*调整顶部左侧图标大小及位置*/
  .top2_wrapper .img-responsive,
  .thumbnail>img,
  .thumbnail a>img .carousel-inner>.item>img,
  .carousel-inner>.item>a>img {
    max-width: 30%;
  }

  /*调整顶部导航栏高度*/
  .top2_wrapper>.container {
    width: 80%;
    text-align: right;
  }

}

.form {
  background: rgb(202, 30, 55);
  width: 400px;
  margin: 100px auto;
}

#login_form {
  display: block;
}

#register_form {
  display: none;
}

.fa {
  display: inline-block;
  top: 27px;
  left: 6px;
  position: relative;
  color: #ccc;
}

input[type="text"],
input[type="password"] {
  padding-left: 26px;
}


.checkbox {
  padding-left: 21px;
}

.form-group {
  margin-top: -15px;
}

//原来的样式
.header-box {
  .brand {
    display: none;
  }


  .left {
    float: left;
  }

  .right {
    float: right;
  }

  a {
    color: #555;
  }

  .logo {
    font-size: 12px;
    color: #ffffff;
  }

  .nav-left {
    float: left;
  }

  .nav-right {
    float: right;
  }
}

.header-nav-ul {
  >ul>li {
    float: left;
    position: relative;

    >a {
      display: block;
      padding: 0px 10px;

      >i {
        transition: .2s linear;
      }
    }

    >.submenu {
      visibility: hidden;
      opacity: .5;
      position: absolute;
      top: 100%;
      left: 0px;
      max-height: 0px;
      width: 100%;
      z-index: 5;
      border-radius: 0 0 8px 8px;
      color: #555;

      >li>a {
        line-height: 20px;
        display: block;
        padding: 10px 0px;
        font-size: 14px;
        text-align: center;
      }

      >li:last-child>a {
        border-bottom: none;
      }
    }
  }

  >ul>li:hover {
    >a>i {
      transform: rotate(180deg);
    }

    >.submenu {
      visibility: initial;
      opacity: 1;
      max-height: 900px;
      background-color: #fafafa;
    }

    >.submenu:hover {
      border-top: 3px #1cbbb4 solid;
      margin-top: -3px;

      >li:hover {
        background-color: #fefefe;

        a {
          color: #1cbbb4;
        }
      }
    }
  }
}



@media screen and (max-width: 768px) {
  .header-box {
    .brand {
      display: inline;
      float: right;
    }

    .nav-right {
      display: none;
    }

    .logo {
      float: none;
      width: 80%;

      .img {
        width: 50%;
      }
    }

    .header-nav-ul {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 120;
      transform: translateX(-100%);
      width: 50%;
      visibility: hidden;
      background: rgba(0, 0, 0, .5);
      transition: transform 100ms ease-in-out;

      .header-nav-left {
        >li {
          width: 100%;
          float: none;

          >.submenu {
            visibility: visible;
            max-height: none;
            position: static;
            background: transparent;
            padding-left: 20px;

            >li {
              >a {
                border-bottom: none;
              }
            }
          }
        }
      }


    }
  }

  .header-box.open {
    .header-nav-ul {
      visibility: visible;
      transform: translateX(0);
    }
  }

}

.left-kefu {
  float: left;
  padding-left: 25px;
  margin-right: 20px;
  padding-right: 20px;
}

.zaixiankefu {
  color: #898989;
}
</style>
<script>
import api from '@/api';
import axios from "axios";
const setting = require('@/setting');

export default {
  name: "bootstrap-header",
  data() {
    return {
      statusXinwen: false,
      statusJingji: false,
      statusJingqu: false,
      statusLvyou: false,
      keyword: '',
      setting,
      listMenunewskind: [],
      listMenuemergencykind: [],
      listMenuattractionkind: [],
      weatherInfo: {
        weather: '',
        temperature: '',
        humidity: '',
        winddirection: '',
        windpower: '',
      }
    }
  },
  watch: {
    $route() {
      this.statusXinwen = false;
      this.statusJingji = false;
      this.statusJingqu = false;
      this.statusLvyou = false;
    }
  },
  computed: {
    isChatPage() {
      return this.$route.path === 'chat';
    }
  },

  methods: {
    goToChat() {
      this.$router.push('chat');
    },
    searchKeyword() {
      var filter = {};
      filter[""] = this.keyword;
      this.$router.push({
        path: '/',
        query: filter
      });
    },
    logout() {
      this.$confirm('确定退出登录？', '确认信息').then(() => {
        // 退出登录
        this.$store.dispatch('user/logout');
      });
    },

    loadListMenu(module, target) {
      this.$post(api.search.all, { table: module, order: 'id desc' }).then(res => {
        this[target] = res.data;
      });
    },
    async fetchWeather() {
      const key = '3d6a7f5c57d9427752c77bfd64a1b14d';
      try {
        const response = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=沙依巴克区`);
        const weatherData = response.data.lives[0];
        console.log(111111 + weatherData);
        this.weatherInfo = {
          weather: weatherData.weather,
          temperature: weatherData.temperature,
          humidity: weatherData.humidity,
          winddirection: weatherData.winddirection,
          windpower: weatherData.windpower,
        };

      } catch (error) {
        console.error(error);
      }
    },
    getWeatherIconClass(weatherCondition) {
      const weatherIconClasses = {
        '晴': 'wi-day-sunny',
        '多云': 'wi-cloudy',
        '雨': 'wi-rain',
        '小雨': 'wi-rain',
        '中雨': 'wi-rain',
        '大雨': 'wi-rain-wind',
        '雷阵雨': 'wi-thunderstorm',
        '雷阵雨并伴有冰雹': 'wi-hail',
        '暴雨': 'wi-rain',
        '阴': 'wi-cloud',
        '雪': 'wi-snow',
        '小雪': 'wi-snow',
        '中雪': 'wi-snow',
        '大雪': 'wi-snow',
        '雨夹雪': 'wi-rain-mix',
        '雾': 'wi-fog',
        '霾': 'wi-smog',
        '沙尘暴': 'wi-sandstorm',
        '浮尘': 'wi-dust',
        '强沙尘暴': 'wi-sandstorm',
        '大暴雨': 'wi-rain-wind',
        '特大暴雨': 'wi-rain-wind',
        '冰雹': 'wi-hail',
        '霜冻': 'wi-snowflake-cold',
        '阵雪': 'wi-snow',
        '冻雨': 'wi-rain-mix',
        '大风': 'wi-strong-wind',
        '轻风': 'wi-day-windy',
        '和风': 'wi-day-windy',
        '清风': 'wi-day-windy',
        '微风': 'wi-day-light-wind',
        '东风': 'wi-wind-direction',
        '东南风': 'wi-wind-direction',
        '南风': 'wi-wind-direction',
        '西南风': 'wi-wind-direction',
        '西风': 'wi-wind-direction',
        '西北风': 'wi-wind-direction',
        '北风': 'wi-wind-direction',
        '东北风': 'wi-wind-direction',
        '旋转风': 'wi-small-craft-advisory',
        '未知': 'wi-na',
      };
      if (!weatherIconClasses[weatherCondition]) {
        if (weatherCondition.includes('雨')) {
          return 'wi-rain';
        } else if (weatherCondition.includes('雷')) {
          return 'wi-thunderstorm';
        } else if (weatherCondition.includes('雪')) {
          return 'wi-snow';
        } else if (weatherCondition.includes('风')) {
          return 'wi-windy';
        } else if (weatherCondition.includes('云')) {
          return 'wi-cloudy';
        }
      }
      return weatherIconClasses[weatherCondition] || weatherIconClasses['未知'];
    },


  },
  created() {
    this.loadListMenu('newskind', 'listMenunewskind');
    this.loadListMenu('emergencykind', 'listMenuemergencykind');
    this.loadListMenu('attractionkind', 'listMenuattractionkind');
  },
  mounted() {
    this.fetchWeather();
  },
  destroyed() {
  }
}
</script>